<template>
    <div style="font-size: 50px;color:#D4D7DE;font-weight: bolder;">欢迎来到网络安全协会一体化办公平台</div>
  <el-dialog
    title="激活账户"
    v-model="dialogVisible"
    width="30%"
    :show-close="false"  
    :close-on-click-modal="false" 
  >
  <br>
    <el-form :model="form1" ref="form1Ref" class="form-style">
      <el-form-item label="电子邮箱">
        <el-input v-model="form1.email" type="email"></el-input>
      </el-form-item>
    </el-form>
    <el-form :model="form">
    <el-form-item label="验证码：">
      <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
    </el-form-item>
    <el-form-item label="获取验证码">
      <el-button :disabled="countdown > 0" @click="startCountdown">
        {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
      </el-button>
    </el-form-item>
  </el-form>
  <div style="color: red;font-size: 10px;">*应工信部要求，所有OA平台需留有成员有效联系方式(电话、邮箱等)，未激活账号将无法使用本平台</div>
    <template #footer>
      <el-button type="primary" @click="submitForms">激活</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted , ref} from 'vue';
import { ServiceJH } from '@/api/user/JH';
import DiaLog from './DiaLog.vue';

onMounted(()=>{
    document.title = "欢迎"
    JH();
})

async function JH(){
    await ServiceJH()
    .then(res=>{
        if(res.data.data==="-1"){
            //此处激活弹窗1
            dialogVisible.value = true;
        }
        else {
            if(res.data.data === "1"){
                alert("激活成功！")
            }
        }
    })
}

//其其他代码
import { ElDialog, ElForm, ElFormItem, ElButton, ElInput, ElInputNumber } from 'element-plus';
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false);
let form1 = ref({
  email: ''
});
const form1Ref = ref(null);


async function submitForms(){
  console.log('表单2数据:', form.value.code);
  ServiceJHtoYZM(form.value)
  .then(res=>{
    ElMessage({
      message: res.data.data,
      type: 'success',
    })
    if(res.data.data === "激活成功!"){
      dialogVisible.value = false;
    }
  })
  .catch(err=>{
    ElMessage({
      message: err.message,
      type: 'warning',
    })
  })
}

let form = ref({
  code: ''
});
const countdown = ref(0);
let timer: number = 0;

async function startCountdown(){
  if (countdown.value === 0) {
    // 启动倒计时
    countdown.value = 60;
    timer = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--;
      } else {
        clearInterval(timer);
      }
    }, 1000);
  }

  await ServiceJHtoEmail(form1.value)
  .then(res=>{
    ElMessage({
      message: res.data.data,
      type: 'success',
    })
  })
  .catch(err=>{
    ElMessage({
      message: err.message,
      type: 'warning',
    })
  })
}

// 组件销毁时清除计时器
import { onUnmounted } from 'vue';
import { ServiceJHtoEmail } from '@/api/user/JHtoEmail';
import { ServiceJHtoYZM } from '@/api/user/JHtoYZM';
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style>
.el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.el-dialog__title {
  font-size: 18px;
  color: #333;
}

.el-dialog__footer {
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
}

.form-style .el-form-item {
  margin-bottom: 20px;
}

.form-style .el-form-item__label {
  font-size: 14px;
  color: #606266;
}

.form-style .el-form-item__content {
  font-size: 14px;
}

.el-button {
  border-radius: 4px;
  font-size: 14px;
  padding: 10px 20px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--primary:focus, .el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.el-button:focus, .el-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
</style>